/**
 * @Creator: flx
 * @Date: 2020/3/17
 * 用户特性页面显示饼状图
 */

import React, {useState, useEffect, useContext, useRef} from 'react';
import {Spin} from 'antd';
import echarts from 'echarts';
import {StoreContext} from '../data';
import './index.styl';

/**
 * @param title{string} - 标题
 * @param dataList{[]} - 请求/feature/field接口返回的userFields数组
 */
export default props => {
    const {state: {osAndNetLoading}} = useContext(StoreContext);
    const {title, dataSource, pieClickCallback} = props;
    // echarts图表DOM容器
    const containerId = `pie-${title}`;
    // 存储echarts实例
    const eChartsRef = useRef(null);

    // 根据dataList数据结构生成echarts需要的数据结构(Option)
    const generateOption = dataSource => {
        const legendData = dataSource.map(item => item.name);
        return {
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)',
            },
            legend: {
                orient: 'horizontal',
                itemWidth: 6,
                itemHeight: 6,
                icon: 'circle',
                align: 'auto',
                bottom: 0,
                data: legendData,
            },
            series: [
                {
                    type: 'pie',
                    radius: ['50%', '70%'],
                    label: {
                        formatter: '{b} {d}%',
                        color: '#000',
                        width: 14,
                        height: 30,
                        margin: 10,
                    },
                    avoidLabelOverlap: true,
                    labelLine: {
                        normal: {
                            show: true,
                            length: 10,
                            length2: 0,
                            lineStyle: {
                                width: 2,
                            },
                        },
                    },
                    data: dataSource,
                },
            ],
        };
    };
    // echarts初始化的effect
    useEffect(() => {
        const chartsContainer = echarts.init(document.getElementById(containerId));

        // 首次挂载时记录echart实例
        eChartsRef.current = chartsContainer;

        if (dataSource) {
            chartsContainer.setOption(generateOption(dataSource), true);
        }
        window.onresize = chartsContainer.resize;
    }, []);

    // echarts更新的effect
    useEffect(() => {
        if (dataSource && eChartsRef.current) {
            eChartsRef.current.setOption(generateOption(dataSource), true);
        }
    }, [dataSource]);

    // 更新click handle
    useEffect(() => {
        if (eChartsRef.current && pieClickCallback) {
            eChartsRef.current.on('click', pieClickCallback);
        }
        return () => {
            eChartsRef.current.off('click', pieClickCallback);
        };
    }, [pieClickCallback, eChartsRef.current]);
    return (
        <Spin spinning={osAndNetLoading}>
            <div className="pie-comp-container">
                <div
                    style={
                        {
                            width: '100%',
                            height: 400,
                        }
                    }
                    id={containerId}
                />
            </div>
        </Spin>
    );
};

